.tooltip {
  @apply relative cursor-pointer;
  z-index: 1;

  &:hover {
    .title {
      @apply opacity-100 block;
      transition: all 0.6s;
      animation: show 0.3s ease;
    }
  }

  .toolBtn {
    @apply w-10 h-10 bg-transparent;

    & > img {
      @apply w-full h-full object-contain;
    }
  }

  .title {
    @apply hidden opacity-0 absolute text-white left-2/4 whitespace-nowrap leading-5 rounded bg-black-60 text-xs z-min-1;
    bottom: 5rem;
    transform: translateX(-50%);
    padding: 0.3125rem 0.4375rem;
  }
}

@media screen and (max-width: 767px) {
  .tooltip {
    .toolBtn {
      @apply w-8 h-8;
    }
  }
}
